<!DOCTYPE html>
<html>
<head>
<title>Fresnel Biprism Diagram</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Clear canvas with a white background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// --- Style settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// --- Geometry ---

// Prism coordinates to match the visual proportions
const v_top = { x: 220, y: 140 };
const v_bottom = { x: 220, y: 360 };
const v_tip = { x: 330, y: 250 };

// Draw the prism triangle
ctx.lineWidth = 3.5;
ctx.beginPath();
ctx.moveTo(v_top.x, v_top.y);
ctx.lineTo(v_bottom.x, v_bottom.y);
ctx.lineTo(v_tip.x, v_tip.y);
ctx.closePath();
ctx.stroke();

// --- Labels ---

// Label 'n' inside the prism
ctx.font = "italic 24px 'Times New Roman'";
// Position 'n' in the visual center of the triangle
const n_x = (v_top.x + v_tip.x) / 2 + 10;
const n_y = v_tip.y;
ctx.fillText("n", n_x, n_y);

// Angles 'α' (alpha)
ctx.lineWidth = 1.5;
ctx.font = "italic 22px 'Times New Roman'";
const angleRadius = 28;

// Top angle α
// Angle of the top slanted side
const topSideAngle = Math.atan2(v_tip.y - v_top.y, v_tip.x - v_top.x);
// Angle of the vertical base (pointing down)
const topBaseAngle = Math.PI / 2;
ctx.beginPath();
ctx.arc(v_top.x, v_top.y, angleRadius, topSideAngle, topBaseAngle);
ctx.stroke();
// Position for the top 'α' label
ctx.fillText("\u03B1", v_top.x + 22, v_top.y + 22);

// Bottom angle α
// Angle of the bottom slanted side
const bottomSideAngle = Math.atan2(v_tip.y - v_bottom.y, v_tip.x - v_bottom.x);
// Angle of the vertical base (pointing up)
const bottomBaseAngle = -Math.PI / 2;
ctx.beginPath();
ctx.arc(v_bottom.x, v_bottom.y, angleRadius, bottomBaseAngle, bottomSideAngle);
ctx.stroke();
// Position for the bottom 'α' label
ctx.fillText("\u03B1", v_bottom.x + 22, v_bottom.y - 22);


// --- Figure Caption ---
ctx.font = "bold 24px 'Courier New', monospace";
const captionX = (v_top.x + v_tip.x) / 2;
const captionY = v_bottom.y + 70;
ctx.fillText("Fig. 2.10", captionX, captionY);

</script>
</body>
</html>